<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>学校信息</h1>
    <h2>学校名称：{{school.name}}</h2>
    <h2>学校地址：{{school.address}}</h2>
    <h2>校长：{{school.principal}}</h2>
    <hr>
    <h1>学生信息</h1>
    <button @click="addGender">添加性别</button>
    <h2>学生姓名：{{student.name}}</h2>
    <h2 v-if="student.gender">性别：{{student.gender}}</h2>
    <h2>学生年龄：真实：{{student.age.rAge}}，对外：{{student.age.sAge}}</h2>
    <h2>爱好：</h2>
    <ul>
        <li v-for="(h, index) in student.hobbies" :key="index">{{h}}</li>
    </ul>
    <h2>朋友们：</h2>
    <ul>
        <li v-for="(f, index) in student.friends" :key="index">
            {{f.name}}--{{f.age}}
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data() {
            return {
                school: {
                    name: 'abc',
                    address: '深圳',
                    principal: '小张',
                },
                student: {
                    name: 'Tom',
                    age: {
                        rAge: 40,
                        sAge: 29
                    },
                    hobbies: ["抽烟", "喝酒", "烫头"],
                    friends: [
                        {name: 'Jerry', age: 35},
                        {name: 'Tony', age: 36},
                    ]
                }
            }
        },
        computed: {},
        methods: {
            addGender(e) {
                Vue.set(this.student, "gender", "男");
            }
        },
        watch: {}
    });
</script>
</html>